<template>
  <div id="galaxy">
    <div class="window u-pr">
      <div class="window--inner u-fw">
        <div class="window--container u-fw u-pr">
          <ul class="window--stars u-fw u-pr">
            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
          </ul>
          <div class="window--sun"></div>
          <div class="window--planet1"></div>
          <div class="window--planet2"></div>
          <div class="window--planet3"></div>
          <div class="window--ring"></div>
          <ul class="window--shootingstars u-fw">
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "galaxy",
  data: () => ({

  })
}
</script>
<style lang="scss" scoped>
#galaxy {
  background-color: #f2f2f2;
  display: flex;
  width: 100vw;
  height: 100vh;
}

$windowradius: 168;

.u-fw {
  width: 100%;
  height: 100%;
}
.u-pr {
  position: relative;
}

.window {
  width: #{$windowradius * 2}px;
  height: #{$windowradius * 2}px;
  margin: auto;
  border-radius: 50%;
  border: 12px solid #fff;
  box-shadow: -2px 15px 54px 4px rgba(255, 100, 183, 0.7);
  background: rgba(11, 16, 31, 1);
  background: linear-gradient(to bottom, rgba(11, 16, 31, 1) 8%, rgba(48, 30, 55, 1) 22%, rgba(255, 108, 189, 1) 100%);
  overflow: hidden;
  &--inner {
    position: absolute;
    top: 0;
    left: 0;
    animation: movegalaxy 10s ease infinite;
  }
  &--stars {
    li {
      position: absolute;
      top: 50%;
      left: 50%;
      border-radius: 50%;
      background-color: white;
      @for $i from 1 through 70 {
        &:nth-child(#{$i}) {
          opacity: random(100)/100;
          $transformY: random($windowradius * 2) - $windowradius + px;
          $transformX: random($windowradius * 2) - $windowradius + px;
          transform: translate($transformY, $transformX);
          $size: random(4) + px;
          width: $size;
          height: $size;
        }
      }
    }
  }
  &--sun {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-55%, -15%);
    width: $windowradius + px;
    height: $windowradius + px;
    border-radius: 50%;
    $sun: #F1F1CB;
    background-color: $sun;
    box-shadow:
      0 0 0 ($windowradius * .1) + px rgba($sun, .20),
      0 0 0 ($windowradius * .2) + px rgba($sun, .20),
      0 0 0 ($windowradius * .3) + px rgba($sun, .20),
      0 0 0 ($windowradius * .4) + px rgba($sun, .20);
  }
  &--planet1 {
    width: ($windowradius * .3) + px;
    height: ($windowradius * .3) + px;
    top: 0;
    right: 0;
    transform: translate((-$windowradius * .6) + px, ($windowradius * .25) + px);
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(115deg, rgba(80, 148, 82, 1) 0%, rgba(33, 74, 100, 1) 51%, rgba(41, 22, 53, .8) 100%);
  }
  &--planet2 {
      width: ($windowradius*.55) + px;
      height: ($windowradius*.55) + px;
      top: 0; right: 0;
      transform: translate(($windowradius*.05) + px, ($windowradius*.70) + px);
      position: absolute;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(204,199,66,1) 0%, rgba(223,23,56,1) 51%, rgba(154,49,121,1) 100%);
  }
  &--planet3 {
      width: ($windowradius*.7) + px;
      height: ($windowradius*.7) + px;
      top: 0; right: 0;
      transform: translate((-$windowradius*.68) + px, ($windowradius*1.2) + px);
      position: absolute;
      border-radius: 50%;
      background: linear-gradient(165deg, rgba(229,78,164,1) 0%, rgba(28,5,21,1) 80%, rgba(28,5,21,1) 100%);
  }
  &--ring {
    width: ($windowradius * .9) + px;
    height: ($windowradius * .9) + px;
    top: 0;
    right: 0;
    transform: translate((-$windowradius * .58) + px, ($windowradius * 1.02) + px) rotateX(-105deg);
    position: absolute;
    border-radius: 50%;
    border-width: ($windowradius * .08) + px 0 0 0;
    opacity: .85;
    border-color: pink;
    border-style: solid;
  }
  &--shootingstars {
    position: absolute;
    top: 0;
    left: 0;
    li {
      width: ($windowradius * .5) + px;
      height: 2px;
      border-radius: 50%;
      display: block;
      background-color: red;
      position: absolute;
      top: 0;
      right: 0;
      background: linear-gradient(-45deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,1) 67%);

      &:nth-child(1) { transform: rotate((random(1) - 40) + deg) translate(-140px, -40px); opacity: .4; }
      &:nth-child(2) { transform: rotate((random(1) - 40) + deg) translate(-220px, 8px); }
      &:nth-child(3) { transform: rotate((random(1) - 40) + deg) translate(-70px, 100px); opacity: .3; }
    }
  }
}

@keyframes movegalaxy {
    0% {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(3%, 4%);
    }
    75% {
      transform: translate(2%, 1%);
    }
    100% {
      transform: translate(0%, 0%);
    }
}
</style>
